<template>
  <div id="toCollection">
    <div ref="header" class="flex search-header flex-middle vux-1px-b">
      <div style="flex: 1;">
        <x-input placeholder="可输入名称/手机搜索" v-model="formItem.keyword" @input="handleSearch" style="border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0.1rem 0.2rem;">
        </x-input>
      </div>
      <div style="width: 1rem; text-align: center; line-height: 0.95rem;" @click="$router.go(-1)">取消</div>
    </div>
    <div ref="penson" style="overflow-y: auto; padding-top: 0.1rem;-webkit-overflow-scrolling: touch;">
      <div class="null" v-if="data.length < 1 && isSearch && !isLoading">
        <img src="../../static/img/nullshoucang.png" style="width: 3.5rem; height: 2.25rem;">
        <p style="margin-top: 0.5rem;">{{ msg }}</p>
      </div>
      <div class="penson flex-middle" v-for="(item, index) in data" :key="index" v-if="data.length">
        <div class="headimg" @click="toDriver(item.bid)" style="width:1.1rem; height: 1.1rem;"><img :src="item.face? item.face: '../../static/img/noheadpic.png'" /></div>
        <div class="flex-auto" style="overflow: hidden;">
          <p class="flex flex-middle" @click="toDriver(item.bid)">
            <span class="overflowtext" style="font-size: 0.3rem;">{{ item.nick_name }}</span>
            <i class="icon icon-gerenrenzheng"></i>
          </p>
          <div class="flex flex-middle" @click="toDriver(item.bid)">
            <rater  v-model="item.comment_score" disabled active-color="#ff9800"></rater>
            <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">
              <span style="font-size: 0.24rem;">{{ item.comment_score }}分</span>
              <span>{{item.car_num}}</span>
            </span>
          </div>
          <div>

            {{ item.car_name}}
            {{ item.car_length}}
            {{ item.car_width}}
          </div>
        </div>
        <div class="other text-right">
          <x-button type="primary" :show-loading="item.loading" action-type="button" @click.native="collection(index, item.bid, item.phone)" mini v-if="item.status == 2">已收藏</x-button>
          <x-button type="warn" :show-loading="item.loading" @click.native="collection(index, item.bid, item.phone)" action-type="button" mini v-if="item.status != 2">收藏Ta</x-button>
        </div>
      </div>
      <load-more tip="加载数据中..." v-if="isLoading"></load-more>
    </div>
  </div>
</template>
<script>
import { Rater, LoadMore } from 'vux'
import { trim } from '../libs/until'
export default{
  mounted() {
    const bodyHeight = document.documentElement.clientHeight
    const headerHeight = this.$refs['header'].offsetHeight
    const pensonHeight = bodyHeight - headerHeight
    this.$refs['penson'].style.height = pensonHeight + 'px'
    this.$refs['penson'].onscroll = () => {
      const scrollTop = this.$refs['penson'].scrollTop
      const setScroolHeight = this.$refs['penson'].scrollHeight - pensonHeight - scrollTop
      if(setScroolHeight <= 120 && !this.isLoading && this.formItem.page < this.pages) {
        this.isLoading = true
        this.formItem.page++
        this.getData()
      }
    }
  },
  components: {
    Rater, LoadMore
  },
  data() {
    return {
      isLoading: false,
      rater: 4,
      isSearch: false,
      timeOut: 0,
      lar: null,
      msg: '',
      data: [],
      pages: 1,
      is_collection: false,
      formItem: {
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        service_id: this.$route.query.service_id || 6,
        keyword: '',
        page: 1,
        pagesize: 20
      }
    }
  },
  methods: {
    toDriver(uid) {
      if(uid) {
        this.$router.push({path: '/driverPage', query: {id: uid, service: this.$route.query.service_id}})
      }
    },
    handleSearch() {
      const timeInterval = 500
      const now = new Date().getTime()
      if(now - this.timeOut < timeInterval){
        clearTimeout(this.lar)
      }
      this.timeOut = now
      this.lar = setTimeout(() => {
        if(trim(this.formItem.keyword)){
          this.data = []
          this.pages = 1
          this.formItem.page = 1
          this.getData()
        }
      }, timeInterval)
    },
    getData() {
      this.formItem.keyword = trim(this.formItem.keyword)
      this.isLoading = true
      if(!this.formItem.keyword){
        return
      }
      this.$http.post($config.host + '/api/Driver/network', qs.stringify(this.formItem)).then(res => {
        const {code, msg, data} = res.data
        this.isSearch = true
        this.isLoading = false
        if(code == 1 && data) {
          this.pages = data.pages
          let newData = []
          data.data.map((item, index) => {
            newData[index] = item
            newData[index].loading = false
          })
          this.data = this.data.concat(newData)
        } else {
          this.msg = msg
        }
      }).catch(err => {
        this.isLoading = false
        this.isSearch = true
        this.msg = $config.errMsg
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    //收藏
    collection(index, bid, phone){
      //防止异步时 重复提交
      if(this.is_collection) {
        return
      }
      let collection = 2
      let url = $config.host + '/api/Driver/add'
      if (this.data[index].status == 2) {
        url = $config.host + '/api/Driver/del'
        collection = 1
      }
      this.is_collection = true
      this.data[index].loading = true
      this.$http.post(url, qs.stringify({
        uid: this.$store.state.userInfo.uid,
        bid,
        phone,
        service_id: this.formItem.service_id,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then((res) => {
        const {code, msg} = res.data
        if(code == '1') {
          this.data[index].status = collection
        }
        this.$vux.toast.text(msg, 'middle')
        this.is_collection = false
        this.data[index].loading = false
      }).catch((err) => {
        this.is_collection = false
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
  }
}
</script>
<style scoped>
.search-header{
  background: #fff;
}
</style>
